import { 
  FaJava, 
  FaAndroid, 
  FaPython, 
  FaNodeJs, 
  FaReact 
} from 'react-icons/fa';
import { SiKotlin, SiJavascript } from 'react-icons/si';
import PropTypes from 'prop-types';

const iconMap = {
  'Java': <FaJava aria-label="Java" />,
  'Android': <FaAndroid aria-label="Android" />,
  'Python': <FaPython aria-label="Python" />,
  'Node.js': <FaNodeJs aria-label="Node.js" />,
  'Kotlin': <SiKotlin aria-label="Kotlin" />,
  'React': <FaReact aria-label="React" />,
  'JavaScript': <SiJavascript aria-label="JavaScript" />
};

const TechIcons = ({ techs }) => {
  return (
    <div className="tech-icons">
      {techs?.map(tech => (
        <span key={tech} className="tech-icon">
          {iconMap[tech] || tech}
        </span>
      ))}
    </div>
  );
};

TechIcons.propTypes = {
  techs: PropTypes.arrayOf(PropTypes.string).isRequired
};

TechIcons.defaultProps = {
  techs: []
};

export default TechIcons;